import React from "react";
import PropTypes from "prop-types";
import {Link} from "react-router-dom";

/**
 * Crumb Component
 */
export default class Crumb extends React.Component
{
    /**
     * 默认属性
     */
    static defaultProps =
    {
        slash : "/",
        items : []
    };

    /**
     * 属性类型
     */
    static propTypes =
    {
        slash : PropTypes.string,
        items : PropTypes.arrayOf(PropTypes.object).isRequired
    };

    render ()
    {
        return <div className="crumb">{
            this.props.items.map((value, index) => {
                return [this.renderLink(value, index), this.renderSlash(index)]
            })
        }</div>
    }

    /**
     * 渲染斜线
     */
    renderSlash (index)
    {
        if (1 < this.props.items.length - index) {
            return <span className="crumb-slash" key={"_"+index}>
                {this.props.slash}
            </span>;
        }

        return ""
    }

    /**
     * 渲染面包屑节点
     */
    renderLink (value, index)
    {
        return <span key={index}>
            {value.url ? <Link to={value.url}>{value.title}</Link> : value.title}
        </span>;
    }
}